<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>菜单列表</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="Access-Control-Allow-Origin" content="*">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="icon" href="/favicon.ico">
        <link rel="stylesheet" href="/js/plugins/layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_1911813_s7m2ktfo.css"  media="all"/>
        <link rel="stylesheet" href="/css/public.css" media="all" />
    </head>
    <body class="tabMain"  >
        <div id="menuList">
            <div class="layui-row">
                <div class="search_text float-l ">
                    <i class="iconfont gkb-sousuo"></i>
                    <input type="text" placeholder="请输入菜单名称" maxlength="10" id="search_input"/>
                </div>
                <button type="button" class="layui-btn float-l magl10 search_btn" id="btn_search">
                    <i class="iconfont gkb-sousuo"></i> 搜索
                </button>
            </div>
            <div class="layui-row magt10">
                <button type="button" class="layui-btn" id="btn_add">
                    <i class="layui-icon layui-icon-addition"></i>
                    添加菜单
                </button>
            </div>
            <div class="magt10">
                <table class="layui-table"  >
                    <colgroup>
                        <col width="250"  align="center">
                        <col width="100"  align="center">
                        <col >
                        <col width="100"  align="center">
                        <col width="80"  align="center">
                        <col width="350"  align="center">
                    </colgroup>
                    <thead>
                        <tr class="layui-center">
                            <th class="layui-center">菜单名称</th>
                            <th class="layui-center">系统图标</th>
                            <th class="layui-center">菜单地址</th>
                            <th class="layui-center">是否可见</th>
                            <th class="layui-center">排序</th>
                            <th class="layui-center">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="(firstItem,firstIndex) in menulist" >
                            <tr>
                                <td class="">
                                    <div class="magl10">
                                        <i class="iconfont gkb-jiantou" v-show="showIndex!= firstIndex && (firstItem.children != null && firstItem.children.length>0)"  @click="showChildred(firstIndex,firstIndex)"></i>
                                        <i class="iconfont gkb-jiantouxiangxia" v-show="showIndex == firstIndex && (firstItem.children != null && firstItem.children.length>0)" @click="showChildred(firstIndex,-1)"></i>
                                        {{firstItem.name}}
                                    </div>
                                </td>
                                <td class="layui-center">
                                    <i class="iconfont " :class="firstItem.icon"></i>
                                </td>
                                <td class="layui-center">{{firstItem.component}}</td>
                                <td class="layui-center">{{firstItem.hidden == true?'隐藏':'可见'}}</td>
                                <td class="layui-center">{{firstItem.sortIndex}}</td>
                                <td  class="layui-center" >
                                    <button type="button" class="layui-btn layui-btn-sm" @click="eidtInfo(firstIndex,-1)"><i class="layui-icon layui-icon-edit" ></i>编辑</button>
                                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" @click="deleteItem(firstItem.id)" v-show="firstItem.children==null || firstItem.children.length==0"><i class="layui-icon layui-icon-delete"></i>删除</button>
                                </td>
                            </tr>
                            <table class="layui-table"  lay-skin="row" v-if="firstItem.children != null &&  firstItem.children.length>0">
                                <colgroup>
                                    <col width="250"  align="center">
                                    <col>
                                    <col width="150"  align="center">
                                    <col width="100"  align="center">
                                    <col width="80"  align="center">
                                    <col  width="350"  align="center">
                                </colgroup>
                                <tbody>
                                    <template v-for="(secondItem,secondIndex) in firstItem.children">
                                        <tr v-show="showIndex == firstIndex">
                                            <td class="">
                                                <div class="magl30">
                                                    {{secondItem.name}}
                                                </div>
                                            </td>
                                            <td class="layui-center">
                                                <i class="iconfont " :class="secondItem.icon"></i>
                                            </td>
                                            <td class="layui-center">{{secondItem.component}}</td>
                                            <td class="layui-center">{{secondItem.hidden == true?'隐藏':'可见'}}</td>
                                            <td class="layui-center">{{secondItem.sortIndex}}</td>
                                            <td  class="layui-center" >
                                                <button type="button" class="layui-btn layui-btn-sm"  @click="eidtInfo(firstIndex,secondIndex)" ><i class="layui-icon layui-icon-edit"></i>编辑</button>
                                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" @click="deleteItem(secondItem.id)" ><i class="layui-icon layui-icon-delete"></i>删除</button>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </template>

                    </tbody>
                </table>
            </div>
            <div class="tabMain" style="width: 550px" hidden id="detailInfo">
                <form class="layui-form" action="" lay-filter="userinfo">
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单</label>
                        <div class="layui-input-block">
                            <select name="parentUID" id="parentUID" lay-filter="parentUID">
                                <option value="">一级菜单</option>
                            </select>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">菜单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" maxlength="20"  lay-reqtext="请输入菜单名称"  autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
                            <input type="hidden" id="id" name="id" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="component"  maxlength="200" lay-reqtext="请输入菜单地址"  autocomplete="off" placeholder="请输入菜单地址" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label required">菜单图标</label>
                            <div class="layui-input-block">
                                <select name="icon" id="icon"  lay-filter="changeIcon"  lay-search="">
                                    <option value="">直接选择或搜索选择</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <i class="iconfont" :class="icon"></i>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">浏览权限</label>
                        <div class="layui-input-block">
                            <select name="viewPower" id="viewPower"  lay-search="">
                                <option value="">直接选择或搜索选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否可见</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="hidden"  lay-skin="switch" lay-text="可见|隐藏" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">排序</label>
                        <div class="layui-input-block">
                            <input type="number" name="sortIndex" lay-verify="required" maxlength="5"  autocomplete="off" placeholder="请输入排序" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入备注信息" class="layui-textarea" name="remark"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item align-center magt30">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-primary" id="btn_cancle">取  消</button>
                            <button type="submit" class="layui-btn" lay-submit  lay-filter="btn_save" id="btn_save">保  存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="/js/jquery-3.5.1.js" ></script>
    <script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="/js/plugins/vue/vue.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/service.js"></script>
    <script type="text/javascript" src="/js/system/menu/menulist.js" ></script>
</html>
